<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>基本列表</title>
    <!-- 引入Vue.js -->
    <script src="../js/vue.js"></script>
  </head>
  <body>
    <!-- 准备好一个容器 -->
    <div id="root">
      <!-- v-for 遍历数组 (常用)-->
      <h2>人员列表(遍历数组)</h2>
      <ul>
        <li v-for="p in persons" :key="p.id">{{p.name}}-{{p.age}}</li>
        <!-- :key 是li标签的唯一标识 index:下标可以作为唯一标识 -->
        <li v-for="(p,index) of persons" :key="index">{{p.name}}-{{p.age}}</li>
        <!-- 使用 in和of 都可以 -->
      </ul>

      <!-- v-for 遍历对象 -->
      <h2>汽车信息(遍历对象)</h2>
      <ul>
        <li v-for="(value,key) of car" :key="key">{{key}}:{{value}}</li>
      </ul>

      <!-- v-for 遍历字符串 -->
      <h2>遍历字符串</h2>
      <ul>
        <li v-for="(char,index) of str" :key="index">{{index}},{{char}}</li>
      </ul>

      <!-- v-for 遍历指定次数 -->
      <h2>遍历指定次数</h2>
      <ul>
        <li v-for="(number,index) of 5" :key="index">{{index}}-{{number}}</li>
      </ul>

    </div>
  </body>
  <script>
    const vm = new Vue({
      el: "#root",
      data() {
        return {
          persons: [
            { id: "001", name: "张三", age: "18" },
            { id: "002", name: "李四", age: "19" },
            { id: "003", name: "王二狗", age: "20" },
          ],
          car: {
            name: "奥迪",
            price: "70w",
            color: "黑色",
          },
          str:'hello'
        };
      },
    });
  </script>
</html>
